<template>
	<view class="container">
		<scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="1===TabCur?'text-green cur':''" @tap="tabSelect" :data-id="1">
				日收益
			</view>
			<view class="cu-item" :class="2===TabCur?'text-green cur':''" @tap="tabSelect" :data-id="2">
				月收益
			</view>
		</scroll-view>
		<view class="padding" v-if="TabCur===1">
			<myCalendar :show="dateshow" :showTitle="false" :showConfirm="false" :minDate='minDate' :maxDate='maxDate'
				:defaultDate="defaultDate" mode="single" allowSameDay closeOnClickOverlay round='15' monthNum='1'
				@confirm="Dateconfirm" :formatter="formatter" ref="calendar">
			</myCalendar>
		</view>
		<view class="cu-list grid col-4 border" v-if="TabCur===2">
			<view class="cu-item" v-for="(item,index) in MonSalaryList" @click="changeMon(item.times)">
				<view class="text-red">
					<text>{{ item.times || ""}}</text>
				</view>
				<text>{{ item.monSalary | priceFormat }}</text>
			</view>
		</view>
		<view class="padding">工资明细</view>
		<view v-if="TabCur===1" v-for="(record,index) in recordList">
			<view :class="dynamicBg(index)+' plantask shadow-warp'">
				<view class="planTop">
					<view style="margin-right: auto;font-weight: bold;font-size: 30rpx;letter-spacing: 10rpx;">机台号：</view>
					<view>{{ record.devNum || "" }}</view>
				</view>
				<!-- <view class="planTop">
					<view style="margin-right: auto;font-weight: bold;font-size: 30rpx;">设备编号：</view>
					<view>{{ record.devSn || "" }}</view>
				</view> -->
				<view class="planTop">
					<view style="margin-right: auto;font-weight: bold;font-size: 30rpx;">客户名称：</view>
					<view>{{ record.customer || "" }}</view>
				</view>
				<view class="planTop">
					<view style="margin-right: auto;font-weight: bold;font-size: 30rpx;">任务详情：</view>
					<view>{{ record.taskDetail || "" }}</view>
				</view>
				<view class="planTop">
					<view style="margin-right: auto;font-weight: bold;font-size: 30rpx;">布种单价：</view>
					<view>{{ record.price || 0 }}</view>
				</view>
				<view class="planTop">
					<view style="margin-right: auto;font-weight: bold;font-size: 30rpx;">员工圈数：</view>
					<view>{{ record.diffnum || 0 }}</view>
				</view>
				<view class="planTop">
					<view style="margin-right: auto;font-weight: bold;font-size: 30rpx;">上班时间：</view>
					<view>{{ record.createTime | dateTimeFormat }}</view>
				</view>
				<view class="planTop">
					<view style="margin-right: auto;font-weight: bold;font-size: 30rpx;">下班时间：</view>
					<view>{{ record.endTime | dateTimeFormat }}</view>
				</view>
				<view class="planTop">
					<view style="margin-right: auto;font-weight: bold;font-size: 30rpx;">单机小计：</view>
					<view>{{ record.diffnum*record.price | priceFormat }}</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="statusLoadMore"/>
		
		<view v-if="TabCur===2" v-for="(item,index) in salaryList">
			<view :class="dynamicBg(index)+' plantask shadow-warp'">
				<view class="planTop">
					<view style="margin-right: auto;font-weight: bold;font-size: 30rpx;">{{ item.createTime | dateFormat}}</view>
					<view>{{ item.daySalary | priceFormat }}</view>
				</view>
			</view>
		</view>
	<watermark :text="userName"></watermark>
	</view>
</template>

<script>
	import {
		listRecord,
		selectDaySalary,
		selectMonSalary
	} from "@/api/record/record.js"
	import myCalendar from "@/uni_modules/uview-ui/components/my-calendar/my-calendar.vue"
import watermark from '@/components/warter/watermark.vue'
import moment from "moment"
	export default {
		components: {
			myCalendar,
			watermark
		},
		data() {
			return {
				userName:this.$store.getters.name, 
				query: {
					userId: this.$store.getters.userId,
					pageNum: 1,
					pageSize: 10
				},
				statusLoadMore: "more", //more,loading,nomore
				dataTotal: 0,
				dateshow: true,
				minDate: '',
				maxDate: '',
				defaultDate: '',
				recordList: [],
				salaryList: [],
				MonSalaryList:[],
				TabCur: 1,
				scrollLeft: 0,
				bgColor: ['bg-gradual-green', 'bg-gradual-blue', 'bg-gradual-purple', 'bg-gradual-orange']
			}
		},
		onLoad() {
			this.query.createTime = moment().format('yyyy-MM-DD HH:mm:ss')
			selectDaySalary(this.query).then(rep => {
				this.salaryList = rep.data
				uni.setStorageSync('salaryList', rep.data)
				this.$nextTick(() => {
					this.$refs.calendar.setFormatter(this.formatter)
				})
			})
		},
		mounted() {
			this.chooseTimed()
			// 如果需要兼容微信小程序的话，需要用此写法
			this.$refs.calendar.setFormatter(this.formatter)
		},
		onShow() {},
		onBackPress() {

		},
		onReachBottom() {
			let allTotal = this.query.pageNum * this.query.pageSize;
			if (allTotal < this.dataTotal) {
				this.statusLoadMore = 'loading'; //加载中状态
				this.query.pageNum++;
				listRecord(this.query).then(response => {
					uni.hideLoading()
					uni.stopPullDownRefresh();
					this.dataTotal = response.total
					this.recordList.push(...response.rows)
					if (this.recordList.length == this.dataTotal) {
						this.statusLoadMore = 'noMore';
					}
				})
			}
		},
		filters: {
			dateFormat(time) {
				if(time == null){
					return
				}
				var moment = require('moment');
				return moment(time).format("YYYY-MM-DD")
			},
			dateTimeFormat(time) {
				if(time == null){
					return
				}
				var moment = require('moment');
				return moment(time).format("YYYY-MM-DD HH:mm:ss")
			},
			priceFormat(price){
				if(price == null){
					return 0
				}
				let realVal = parseFloat(price).toFixed(2)
				return realVal
			}
		},
		methods: {
			changeMon(time){
				this.query.createTime = moment(time).format('yyyy-MM-DD HH:mm:ss')
				selectDaySalary(this.query).then(rep => {
					this.salaryList = rep.data
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				if(this.TabCur==1){
					this.query.createTime = moment().format('yyyy-MM-DD HH:mm:ss')
					selectDaySalary(this.query).then(rep => {
						this.salaryList = rep.data
						uni.setStorageSync('salaryList', rep.data)
						this.$nextTick(() => {
							this.$refs.calendar.setFormatter(this.formatter)
						})
					})
				}else{
					selectMonSalary({
						userId: this.$store.getters.userId
					}).then(rep => {
						this.MonSalaryList = rep.data
					})
				}
			},
			chooseTimed() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (month <= 9) {
					month = '0' + month;
				}
				if (day <= 9) {
					day = '0' + day;
				}
				this.minDate = year + '-' + month + '-' + 1;
				this.maxDate = year + '-' + month + '-' + day;
				this.defaultDate = year + '-' + month + '-' + day;
			},

			/**
			 * 动态背景
			 */
			dynamicBg(index) {
				return this.bgColor[index % 4]
			},
			Dateconfirm(e) {
				this.recordList = []
				uni.showLoading()
				this.query.pageNum = 1
				this.query.createTime = e[0]
				listRecord(this.query).then(response => {
					uni.hideLoading()
					this.dataTotal = response.total
					this.recordList.push(...response.rows)
					if (this.recordList.length == this.dataTotal) {
						this.statusLoadMore = 'noMore';
					}
				})
			},
			formatter(day) {
				var list = uni.getStorageSync('salaryList')
				list.forEach(item => {
					if (day.month === moment(item.createTime).month() + 1 && day.day === moment(item.createTime).date()) {
						day.bottomInfo = parseFloat(item.daySalary).toFixed(2)
					}
				})
				return day
			}
		}
	}
</script>

<style>
	page {
		height: 101%;
	}
</style>

<style lang="scss" scoped>
	.plantask {
		margin: 30rpx;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.planTop {
		display: flex;
		flex-flow: row;
		justify-content: flex-start;
		align-items: center;
	}

	.title {
		color: $u-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
</style>
